
<!-- 使用方法 -->
<!-- 你应该将页面中所有用到的图片都放在 urls 中，视图上通过 urls[x] 来使用。 -->


<!-- 注意事项 -->
<!-- 如果图片有加载失败的，可在 @onerror 事件中得到监听与处理，并不影响正常页面显示。 -->
<!-- 你也可以将该思路进行组件封装 -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <!-- END -->

    <title>uh5 多图像预加载示例</title>
    <style>
        
        /* 加载前(例如骨架屏) */
        .after-content{
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .after-item{
            background: #d5d5d5;
            width: 200px;
            height: 200px;
            border-radius: 20px;
        }
        /* END */


        /* 加载完毕(正常页面) */
        img{
            width: 200px;
            height: 200px;
            border-radius: 20px;
        }
        /* END */

    </style>
</head>
<body>

<section id="app">

    <!-- 加载后(正常页面) -->
    <!-- 这里就是你要正常呈现给用户的页面元素 -->
    <div v-if="loaded">
        <div class="after-content">
            <!-- 失败的图片 -->
            <img :src="urls[0]">
            <!-- END -->
            <img :src="urls[1]">
            <img :src="urls[2]">
        </div>
        <div class="after-content">
            <img :src="urls[3]">
            <img :src="urls[4]">
            <img :src="urls[5]">
        </div>
        <div class="after-content">
            <img :src="urls[6]">
            <img :src="urls[7]">
            <img :src="urls[8]">
        </div>
    </div>
    <!-- END -->
            
            
    <!-- 加载前(例如骨架屏) -->
    <!-- 这里你需要做一套加载前的骨架屏 -->
    <!-- 或者做其他效果 -->
    <!-- 你有 percent 可以用(它是加载的百分比%) -->
    <div v-else>
        <!-- 正在加载中，当前: {{percent}} % -->
        <!-- 当然也可以变为可视化进度条 -->
        <div>正在加载中({{percent}})...</div>
        <div class="after-content">
            <div class="after-item"></div>
            <div class="after-item"></div>
            <div class="after-item"></div>
        </div>
        <div class="after-content">
            <div class="after-item"></div>
            <div class="after-item"></div>
            <div class="after-item"></div>
        </div>
        <div class="after-content">
            <div class="after-item"></div>
            <div class="after-item"></div>
            <div class="after-item"></div>
        </div>
    </div>
    <!-- END -->

</section>


<script>
var vm = new Vue({

    el: '#app',
    data(){
        return {
            loaded: false,
			count: 0,
			
			// 的
			urls: [
				
				// 它是一张加载会失败的图片(异常情况)
				'https://xxx.gif',
				
				// 下面的都是正常的图片(多放点拖慢加载速度)
				'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2826242742,3026899353&fm=26&gp=0.jpg',
				'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856251795,1266165039&fm=26&gp=0.jpg',
				'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/622762d0f703918fd091b3c4523d269759eec478.jpg',
				'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/d1160924ab18972b8c55b2eee7cd7b899e510aa2.jpg',
				'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=393496326,3808979214&fm=224&gp=0.jpg',
				'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3373176577,3068797494&fm=224&gp=0.jpg',
				'https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/adaf2edda3cc7cd99b7d60843b01213fb80e911e.jpg',
				'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/5882b2b7d0a20cf46036d1a870094b36acaf9926.jpg',
				'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/00e93901213fb80ee7ca8a7b32d12f2eb9389407.jpg',
				'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3964802384,1496004257&fm=224&gp=0.jpg'
				
			],
			percent: '0%',
        }
    },

    watch: {
		count: function(val, old) {

			// 图片全部加载完成后切换页面
			// [从骨架屏切换回正常页面]
			if (val === this.urls.length) {
                console.log('所有图片加载完毕(包含加载失败的图片)')
				
                // 切换为正常视图
				this.loaded = true
			}
		}
	},

    mounted() {
		// 预加载图片
		this.preLoad()
	},

    methods: {

        /*
		 * 预加载图片
		 * @return void
		 */
		preLoad: function()
		{
			
			// 将所有图片循环遍历
			for (let url of this.urls)
			{
				
				// create image DOM
				let image = new Image()
				image.src = url
				
				// 图片加载完毕事件
				image.onload = () => {
					this.count++
					// 计算图片加载的百分数%(percent)
					let percentNum = this.calculation()
					this.percent = `${percentNum}%`
				}
				
				// 当有图片加载失败事件(即有图片加载出错)
				image.onerror = () => {
                    console.error(`有图片加载出错: ${url}`)
                    this.count++
                    // 计算图片加载的百分数%(percent)
					let percentNum = this.calculation()
					this.percent = `${percentNum}%`
				}
			}
		},


        /*
         * 计算图片加载的百分数%
         * percent
         * @return String
         */
        calculation: function()
        {
            return Math.floor(this.count / this.urls.length * 100)
        }

    }
})
</script>
</body>
</html>